<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title></title>

    <script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">

        //提交JSON格式数据按钮的点击事件
        function sendPojoJson(){
            $.ajax({
                url:"<%=request.getContextPath()%>/json/getPojoJson",
                type:"post",
                contentType:"application/json;charset=UTF-8",
                //JSON.stringify() 可以直接以POJO类型进行接收
                //也可以以普通JSON形式接收--{"stuName":"tom","age":100}，可以使用jackson处理成键值对类型
                data:JSON.stringify({
                    stuName:"tom",
                    age:100
                })
            });
        }

        //提交JSON格式数据按钮的点击事件
        function sendStringJson(){
            $.ajax({
                url:"<%=request.getContextPath()%>/json/getStringJson",
                type:"post",
                contentType:"application/json;charset=UTF-8",
                //如果没有JSON.stringify() 只能以纯字符串形式接收JSON数据---stuName=tom&age=100
                //只能使用字符串的方法进行处理，不能使用jackson处理字符串
                data:{
                    stuName:"tom",
                    age:100
                }
            });
        }

        //获取Pojo类型的数据
        function getPojoJson(){
            $.ajax({
                url:"<%=request.getContextPath()%>/json/sendPojoJson",
                type:"post",
                data:{
                    id:1,
                },
                dataType:"json",
                //因为此处规定了要接收Student类型的数据
                success:function (student){
                    alert(student.stuName+","+student.age)
                }
            });
        }

        //获取单条Json数据
        function getSingleJson(){
            $.ajax({
                url:"<%=request.getContextPath()%>/json/getSingleJson",
                type:"post",
                dataType:"json",
                //以普通的Json字符串的形式返回
                success:function (studentJsonString){
                    alert(studentJsonString.stuName+","+studentJsonString.age)
                }
            });
        }

        //获取多条Json数据
        function getMoreJson(){
            $.ajax({
                url:"<%=request.getContextPath()%>/json/getMoreJson",
                type:"post",
                dataType:"json",
                //以普通的Json字符串的形式返回一个列表
                success:function (studentJsonStringList){
                    //对列表进行遍历输出
                    for (let i = 0; i < studentJsonStringList.length; i++) {
                        var student = studentJsonStringList[i];
                        //获取POJO类型的对象，可以直接获取对象中的属性值
                        alert(student.stuName+","+student.age)
                    }
                }
            });
        }


    </script>

</head>
<body>

    <input type="button" value="提交json格式POJO数据" onclick="sendPojoJson()">
    <input type="button" value="提交json格式String数据" onclick="sendStringJson()">
    <input type="button" value="接收json格式POJO数据" onclick="getPojoJson()">
    <input type="button" value="接收json格式单条数据" onclick="getSingleJson()">
    <input type="button" value="接收json格式多条数据" onclick="getMoreJson()">

</body>
</html>
